<template>
  <div style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px)">
<!--    功能趋于-->
    <div style="margin: 10px 0">

    </div>
<!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button style="margin-left: 5px; background-color: #5defc1; color: white" @click="load" plain>查询</el-button>
    </div>
    <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
        
        <el-table-column
            prop="id"
            label="编号">
        </el-table-column>

        <el-table-column
            prop="itname"
            label="道具名称">
        </el-table-column>
        
        <el-table-column
        label="操作">
        <template v-slot="{ row }">
          <el-button
            v-if="row.state === '空闲'"
            @click="bookLab(row)">
            收藏
          </el-button>
          <el-button
            v-else
            disabled>
            已收藏
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <div style="margin: 10px 0">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>


    </div>
  </div>
</template>

<script>


import request from "@/utils/request";

export default {
  name: 'Home',
  components: {

  },
  data() {
    return {
      form: {},
      search:'',
      currentPage4: 1,
      pageSize: 10,
      total:0,
      // dialogVisible:false,
      tableData: [],

    }
  },
  created() {
    this.load();
  },


  methods:{
    bookLab(row) {
      // 将状态从空闲改为占用
      row.state = '占用';
    },



    load(){
      request.get("/api/itemstatus",{
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res =>{
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    add(){
        this.dialogVisible = true;
        this.form = {};
    },
    save(){
      if (this.form.id){//更新
        request.put("/api/itemstatus",this.form).then(res =>{
          console.log(res);
          if (res.code==='0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();//刷新表格数据
          this.dialogVisible = false;//关闭弹窗
        });
      }else {//新增
        request.post("/api/itemstatus",this.form).then(res =>{
          console.log(res);
          if (res.code==='0'){
            this.$message({
              type: "success",
              message: "新增成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();//刷新表格数据
          this.dialogVisible = false;//关闭弹窗
        });
      }

    },
    handleEdit(row){
      this.form = JSON.parse((JSON.stringify(row)));
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize){//改变当前页面个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){//改变当前页码
      this.currentPage4 = pageNum;
      this.load();
    },
    // currentPage4(){
    //
    // },
    handleDelete(id){
      console.log(id);
      request.delete("/api/itemstatus/"+id).then(res => {
        if (res.code==='0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()//重新加载
      });
    }
  }
}
</script>
